
<template>
  <div class="container">
    <el-card class="table-container">
      <el-table :data="tableInfo.articles" border empty-text="暂无数据">
        <el-table-column type="index" label="序号" sortable align="center" width="120px" />
        <el-table-column prop="title" label="标题" align="center">
          <template #default="scope">
            <div style="text-align: center">
              <el-button type="primary" link @click="toArticleDetail(scope.row.id)">{{ scope.row.title }} </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="类别" align="center" />
        <el-table-column prop="publish_status" label="状态" align="center" />
        <el-table-column prop="right" label="权限" align="center" />
        <el-table-column prop="id" label="id" sortable align="center" width="120px" />
        <el-table-column align="center" width="200px">
          <template #header>
            <el-input v-model.trim="tableInfo.keyword" placeholder="搜索题目" class="input-with-select" @blur="initTableInfo"
              @keyup.enter.native="initTableInfo">
              <template #append>
                <el-button :icon="Search" style="background-color: #409eff;color: #fff;"
                  @click="initTableInfo"></el-button>
              </template>
            </el-input>
          </template>
          <template #default="scope">
            <el-button type="success" @click="handlePublish(scope.$index, scope.row)">发布</el-button>
            <el-button type="danger" @click="handleToPrivacy(scope.$index, scope.row)">加入草稿</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next, jumper, ->, total ,sizes" :page-sizes="['5', '10', '20']"
          @size-change="sizeChange" @current-change="currentChange" :total="tableInfo.total" small :page-size="tableInfo.pageSize" />
      </div>
    </el-card>
  </div>
</template>
<script setup lang='ts' name="article_verified">
import { ref, reactive, onMounted, computed } from 'vue'
import { useUserInfoStore } from '@/stores';
import { findArticles, updateArticle } from '@/api'
import { ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';
import {Search} from '@element-plus/icons-vue'
const router = useRouter()
const userInfoStore = useUserInfoStore()
const { uuid } = userInfoStore.userInfo
const tableInfo = reactive({
  articles: [],
  pageSize: 10,
  page: 1,
  publish_status: 1,
  total: 0,
  keyword:''
})
onMounted(() => {
  initTableInfo()
})
interface Article {
  id: number
  name: string
  address: string
}
const initTableInfo = async () => {
  const { pageSize, page, publish_status,keyword } = tableInfo
  const data = { uuid, pageSize, page, publish_status,keyword }
  const res = await findArticles(data)
  const { articles, total } = res.data.data
  tableInfo.articles = articles
  tableInfo.total = total
}

const handlePublish = async (index: number, row: Article) => {
  const data = { publish_status: 2 }
  try {
    const res = await updateArticle(row.id, data)
    ElNotification({
      title: '成功',
      message: `"${res.data.data.title}"成功发布`,
      type: 'success'
    })
    initTableInfo()
  } catch (error) {
    ElNotification({
      message: '失败',
      type: 'error'
    })
  }

}
const handleToPrivacy = async (index: number, row: Article) => {
  const data = { right: '私有', publish_status: 4 }
  try {
    const res = await updateArticle(row.id, data)
    ElNotification({
      title: '成功',
      message: `"${res.data.data.title}"已加入草稿箱`,
      type: 'warning'
    })
    initTableInfo()
  } catch (error) {
    ElNotification({
      message: '失败',
      type: 'error'
    })
  }
}

//分页器
const sizeChange = (pageSize: number) => {
  tableInfo.pageSize = pageSize
  initTableInfo()
}
const currentChange = (page: number) => {
  tableInfo.page = page
  initTableInfo()
}

const toArticleDetail = (id: number) => {
  router.push({ name: 'article_detail', params: { id } })
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  // margin: 0 20px;
  // display: flex;
  // flex-direction: column;

  .table-container {
    margin: 20px;

    .pagination {
      margin-top: 10px;
      display: flex;
      justify-content: end;
    }
  }
}
</style>